<template>
    <view class="withdrawals-history-container u-p-20">
        <mescroll-body ref="mescrollRef" auto="false" :down="down"  @init="mescrollInit" @down="downCallback" @up="upCallback">
            <u-collapse hover-class="none">
                <u-collapse-item v-for="(item, index) in withdrawalsList" :key="index">
                    <text slot="title">提现时间：{{ item.apply_time | date('yyyy-mm-dd hh:MM') }}</text>
                    <view class="u-flex">
                        <view class="colla-content u-flex-1">
                            <view class="u-m-b-20">提现状态：{{ item.status | withdraealsStatus }} </view>
                            <view>提现金额：<text class="color-red">{{ item.apply_money | unitPrice('￥') }}</text></view>
                        </view>
                        <view class="color-red" @click="lookDetails(item)">
                            查看详情
                        </view>
                    </view>
                </u-collapse-item>
            </u-collapse>
        </mescroll-body>
        <u-popup v-model="isShowDetail" mode="bottom" closeable length="70%">
            <view class="u-m-30 u-text-center" style="font-weight: 600;">
                提现详情
            </view>
            <view class="pop-details u-m-l-20 u-m-r-20">
                <view class="u-m-20">提现金额：<text class="color-red">￥{{ currentRow.apply_money | unitPrice }}</text></view>
                <view class="u-m-20">当前状态：<text>{{ currentRow.status | withdraealsStatus }}</text></view>
                <view class="u-m-20">备注信息：<text class="remark">{{ currentRow.apply_remark || '' }}</text></view>
                <view class="u-m-20">提现日志：<text class="remark">{{ currentRow.transfer_remark || '' }}</text></view>
                <view class="u-m-20">审核备注：<text class="remark">{{ currentRow.inspect_remark || '' }}</text></view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import * as API_Distribution from '@/api/distribution.js'
    import { RegExp } from '@/ui-utils/index.js'
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
        mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
                params: {
                    page_no: 1,
                    page_size: 20
                },
                /** 提现记录列表 */
                withdrawalsList: [],
                /** 是否显示详情 */
                isShowDetail: false,
                /** 当前行的对象 */
                currentRow: {},
                down: {
                    auto: false
                }
			};
		},
        filters: {
            withdraealsStatus(val) {
                switch(val) {
                    case 'APPLY': return '申请中'
                        break
                    case 'TRANSFER_ACCOUNTS': return '已转账'
                        break
                    case 'VIA_AUDITING': return '审核通过'
                        break
                    case 'FAIL_AUDITING': return '审核失败'
                        break
                }
            }
        },
        methods: {
            //上拉加载数据
            upCallback (page){
                this.params.page_no = page.num;
                this.getWithdrawalsList();
            },
            //下拉刷新
            downCallback(){
                this.params.page_no = 1;
                this.withdrawalsList = [];
                this.getWithdrawalsList();
            },
            /** 获取可提现金额 */
            getWithdrawalsList() {
                API_Distribution.getWithdrawalsList(this.params).then(response => {
                    const { data } = response
                    if (data && data.length) {
                        this.withdrawalsList.push(...data)
                    }
                    this.mescroll.endBySize(data.length, response.data_total)
                }).catch(error => {
                    this.mescroll.endErr()
                })
            },
            /** 查看详情 */
            lookDetails(item) {
                this.isShowDetail = true
                this.currentRow = item
            }
        }
	}
</script>

<style lang="scss" >
    page {
        overflow: hidden;
    }
    .color-red {
        color: $u-type-error;
    }
    .pop-details .remark {
        word-break: break-all;
    }
    .withdrawals-history-container {
        overflow: hidden;
    }
    /deep/ {
        .u-empty {
            margin-top: -300rpx !important;
        }
        .u-collapse-body {
            height: 120rpx;
        }
    }
</style>
